.fabric-desgin-wrap {
    .fabric-desgin__header {
        display: flex;
        align-items: baseline;
        margin-bottom: 8px;
        .header__title {
            flex: 0 0 180px;
            user-select: none;
        }
        .header__tool {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            .icon {
                font-size: 20px;
                cursor: pointer;
                padding: 12px 8px;
            }
        }
        .tooptip-text {
            color: $activeColor;
            font-size: 14px;
        }
    }
    .fabric-desgin__body {
        // display: flex;
        display: grid;
        grid-template-columns: 240px 1fr 220px;
        column-gap: 10px;
        row-gap: 10px;
        .fabric-desgin__nav {
            width: 240px;
            // flex: 0 0 230px;
            .custom-n-tabs {
                .n-tabs-tab {
                    padding: 6px 5px;
                }
            }
        }
        .fabric-desgin__content {
            // flex: 1;
            // width: 100%;
            height: calc(100vh - 130px);
            // 重置背景样式
            background-color: #fff;
            background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
            linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
            overflow: hidden;
            .canvas {
                // border: 1px solid #eee;
                border-radius: 4px;
                box-shadow: 1px 0px 5px 0px $gray;
                width: 300px;
                height: 300px;
                // margin: 0 auto;
            }
        }
        .fabric-desgin__action {
            // width: 308px;
            // flex: 0 0 308px;
            height: calc(100vh - 130px);
            overflow-y: auto;
            // padding: 6px 10px;
            padding: 5px 0px;
            .action__title {
                border-bottom: 1px solid $gray;
            }
            .action-item {
                &__wrap {
                    border-bottom: 1px solid $gray;
                    padding-bottom: 15px;
                }
            }
            .toggle {
                margin: 0 0 10px 0;
                button {
                    margin-right: 5px;
                }
            }
        }
    }
}